<template>
    <div id="Novel_Details">
        <el-row :gutter="20">
            <el-col :span="this.$store.state.elColNum">
                <el-form ref="form" :model="form" :label-width="this.$store.state.labelWidth" size="small">
                    <el-form-item label="小说标题">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="小说封面图链接">
                        <el-upload
                                class="avatar-uploader"
                                action="upDataUrl"
                                :show-file-list="false"
                                :http-request="myUpload1"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="form.coverpic" :src="form.coverpic" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="小说描述">
                        <el-input v-model="form.desc" :autosize="{ minRows: 4}" type="textarea"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="发布栏目">-->
<!--                        <el-cascader-->
<!--                                v-model="areaIds"-->
<!--                                :options="areaList"-->
<!--                                :props="props"-->
<!--                                clearable-->
<!--                                style="width: 100%">-->
<!--                        </el-cascader>-->

<!--                    </el-form-item>-->
                    <el-form-item label="小说分类">
                        <el-checkbox-group v-model="form.cateids">
                            <el-checkbox :label="key" v-for="(value,key,index) in classList" :key="index">{{value}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="男频/女频">
                        <el-select v-model="form.issex" placeholder="请选择">
                            <el-option label="男频" value="1"></el-option>
                            <el-option label="女频" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="小说状态" v-if="this.id">
                        <el-select v-model="form.iswz" placeholder="请选择">
                            <el-option label="连载中" value="1"></el-option>
                            <el-option label="已完结" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <div style="display: flex;justify-content: flex-end">
            <el-button @click="closeDetails" size="small">取 消</el-button>
            <el-button type="primary" @click="onSubmit" size="small">保存草稿</el-button>
            <el-button type="success" @click="onPush" size="small">提交审核</el-button>
        </div>
    </div>
</template>

<script>
  import {uploadimg, isRealNum} from "../../utils/common";
  import quillConfig from '../../utils/quill-config.js'

  export default {
    name: "system_site",
    props: ['bookId'],
    data() {
      return {
        props: {multiple: true},
        form: {
          title: '',
          author: '',
          infopic: '',
          coverpic: '',
          selectpic: '',
          cateids: [],
          isfw: '',
          isnew: '',
          islong: '',
          issex: '',
          tag: '',
          iswz: '',
          isbg: '',
          remark: '',
          list_order: '',
          desc: '',
          paychapter: '',
          thermal: '',
          hots: '',
          likes: '',
          sharetitle: '',
          sharedesc: '',
          tchapter: '',
          coin: '',
          isrecommend: '',
          ishow: '',
          status: '',
          columnids: []
        },
        editorOption: quillConfig,
        areaList: [],
        classList: [],
        areaIds: [],
        id: '',
      }
    },
    created() {
      this.getCateIds();
      // this.getAreas();
      this.id = this.bookId;
      if (this.id) {
        this.$axios.get('writer/novel/' + this.id, {}).then((res) => {
          let data = res.data;
          for (let key in data) {
            if (isRealNum(data[key])) {
              data[key] = data[key].toString()
            }
          }
          data.cateids = data.cateids.split(',');
          let newInfo = [];
          data.column_info.map((num) => {
            newInfo.push([num.channel_id, num.column_id])
          });
          data.remark = this.html_decode(data.remark);
          this.form = data;
          this.areaIds = newInfo;
          this.$forceUpdate()
        })
      }
    },
    methods: {
      onSubmit() {
        this.form.columnids = [];
        this.areaIds.map((num) => {
          this.form.columnids.push(num[1]);
        });
        this.form.cateids = this.form.cateids.join(',');
        this.form.columnids = this.form.columnids.join(',');
        this.form.anid = this.bookId

        this.$axios.post("writer/novel/save-draft", this.form).then((res) => {
          this.$message.success('成功');
          this.closeDetails()
        });

      },
      getCateIds() {
        this.$axios.post("writer/novel/category", '').then((res) => {
          this.classList = res.data;
        });
      },
      onPush(){
        this.$axios.post("writer/novel/push", {id:this.id}).then((res) => {
          this.$message.success('发布成功');
          this.closeDetails()
        });
      },
      // getAreas() {
      //   this.$axios.post("writer/channel/getAll", '').then((res) => {
      //     let data = res.data;
      //     data.map(async (num) => {
      //       num.value = num.id;
      //       num.label = num.title;
      //       num.children.map((item) => {
      //         item.value = item.id;
      //         item.label = item.title;
      //       })
      //     });
      //     this.areaList = data;
      //   });
      // },
      // 上传图片文件
      myUpload1(content) {
        uploadimg(content).then(res => {
          this.form.coverpic = res;
        })
      },
      beforeAvatarUpload(file) {
        var suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
        let arr = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'pdf', 'JPG', 'JPEG', 'PNG', 'GIF', 'BMP', 'PDF']
        if (arr.indexOf(suffix) === -1) {
          this.$message.error('上传图片格式有误');
          return false
        }
      },
      html_decode(str) {
        var s = "";
        if (str.length == 0) return "";
        s = str.replace(/&amp;/g, "&");
        s = s.replace(/&lt;/g, "<");
        s = s.replace(/&gt;/g, ">");
        s = s.replace(/&nbsp;/g, " ");
        s = s.replace(/&#39;/g, "\'");
        s = s.replace(/&quot;/g, "\"");
        s = s.replace(/<br\/>/g, "\n");
        return s;
      },
      closeDetails() {
        this.$emit("closeDatails", false)
      }
    }
  }
</script>

<style scoped lang="scss">

</style>